<style lang="less">
@import '../../../styles/common.less';
</style>

<template>
  <Row>
    <header>
      <Form action="" method="get" name="exportList" id="exportList" enctype="multipart/form-data">
        <Row style="margin-top:20px">
          <span style="width: 200px;margin-left: 15px;">姓名：</span>
          <Input v-model="collectCondition.custName" style="width: 150px" name="custName" />

          <span style="width: 200px;margin-left: 15px;">身份证号：</span>
          <Input v-model="collectCondition.custCardNo" style="width: 150px" name="custCardNo" />
          <span style="width: 200px;margin-left: 15px;">手机号：</span>
          <Input v-model="collectCondition.mobile" style="width: 150px" name="mobile" />

          <span style="width: 200px;margin-left: 15px;">贷款产品：</span>

          <Select v-model="collectCondition.productCode" class="v-select-wrapper" style="width:150px" name="productCode">
            <Option v-for="item in productList" :value="item.productType" :key="item.productType">{{ item.productTypeName }}</Option>
          </Select>
          <span style="width: 200px;margin-left: 15px;">逾期类型：</span>
           <Select v-model="collectCondition.overdueDays" class="v-select-wrapper" style="width:150px" name="overdueDays">
            <Option v-for="item in overdueDaysList" :value="item.overdueTypeCode" :key="item.overdueTypeCode">{{item.overdueTypeName}}</Option>
          </Select>
        </Row>
        <Row style="margin-top:20px">
          <span style="width: 200px;margin-left: 15px;">分案时间：</span>
          <DatePicker v-model="collectCondition.assignStrDate" type="date" style="width: 150px" name="assignStrDate"></DatePicker>
          <span>至</span>
          <DatePicker v-model="collectCondition.assignEndDate" type="date" placement="bottom-end" style="width: 150px" name="assignEndDate"></DatePicker>

          <span style="width: 200px;margin-left: 15px;">逾期天数：</span>
          <Input v-model="collectCondition.overdueCurrentTotalDay" style="width: 150px" name="overdueCurrentTotalDay" />

          <span style="width: 200px;margin-left: 15px;">催收人：</span>
          <Select v-model="collectCondition.assignee" class="v-select-wrapper" style="width:150px" >
            <Option v-for="item in collectorList" :value="item.userCode" :key="item.userCode">{{item.userNamep}}</Option>
          </Select>

           <Button type="primary" @click="collect" style="margin-left: 10px;">搜索</Button>
          <Button type="primary" @click="reset" style="margin-left: 10px;">重置</Button>
        </Row>
        <input type="hidden" name="pageNum" id="pageNum" v-model="collectCondition.pageNum" />
        <input type="hidden" name="pageSize" id="pageSize" v-model="collectCondition.pageSize" />
      </Form>
    </header>
    <br>
    <div>
      <Table border :columns="orderColumns" :data="orderData" style="width: 100%;"></Table>
    </div>
    <div style="text-align: center;margin-top: 36px;">
      <Page :total="collectCondition.total" :current="collectCondition.pageNum" :page-size="collectCondition.pageSize" size="small" show-elevator show-sizer show-total @on-change="pageChange" @on-page-size-change="sizeChange"></Page>
    </div>
    <Modal v-model="modal1" title="更换催收人" :scrollable="true" @on-ok="updateBsFund" >
      <Form ref="downForm" :model="collectCondition" :label-width="120" inline>
         <RadioGroup v-model="collectCondition.collectorCode" vertical>
            <Radio  v-for="item in collectorCodeList" :key="item.userCode" :label="item.userCode">{{ item.userNamep }}</Radio>
        </RadioGroup>
      </Form>
    </Modal>
  </Row>

</template>

<script>

import collectionDealCompent from './collection-deal-compent.vue'
export default {
  components: {
    collectionDealCompent
  },
  data () {
    return {
      vertical: 'apple',
      modal1: false,
      curOverdueCaseId: '',
      collectParams: {
        loanId: '',
        overdueCode: '',
        custCardNo: ''
      },

      collectorCodeList: [],
      collectCondition: {
        custName: '',
        custCardNo: '',
        mobile: '',
        productCode: '',
        overdueDays: '',
        assignStrDate: '',
        assignEndDate: '',
        overdueCurrentTotalDay: '',
        collectorCode: '',

        pageNum: 1,
        pageSize: 20,
        total: 0
      },
      collectorList: [],
      overdueDaysList: [],
      orderColumns: [
        {
          type: 'index',
          title: '序号',
          width: 60
        },
        {
          title: '借款人',
          key: 'custName',
          align: 'center',
          render: (h, params) => {
            const vm = this
            return h('div', {
              on: {
                click () {
                  vm.$router.push({
                    name: 'collection-deal-compent',
                    query: {
                      custCardNo: params.row.custCardNo,
                      loanId: params.row.loanId,
                      overdueCaseId: params.row.overdueCaseId,
                      overdueType: 1,
                      type: 1,
                      collapseCotrol: false
                    }
                  })
                }
              },
              style: {
                'color': '#20a0ff',
                'cursor': 'pointer'
              }
            }, params.row.custName)
          }
        },
        {
          title: '逾期天数',
          key: 'overdueCurrentTotalDay',
          align: 'center'
        },
        {
          title: '应还款日期',
          key: 'paymentDate',
          align: 'center',
          render: (h, params) => {
            var vm = this
            return h('div', [
              h('span', vm.$util.loanModularFormatTime(params.row.paymentDate))
            ])
          }
        },
        {
          title: '贷款产品',
          key: 'productName',
          align: 'center'
        },
        {
          title: '最近一次行动结果',
          key: 'lastActionResultName',
          align: 'center'
        },
        {
          title: '分案时间',
          key: 'assignDate',
          align: 'center',
          render: (h, params) => {
            var vm = this
            return h('div', [
              h('span', vm.$util.loanModularFormatTime(params.row.assignDate))
            ])
          }
        },
        {
          title: '当前催收人员',
          key: 'collectorCode',
          align: 'center'
        },
        // {
        //   title: '停留时间',
        //   key: 'currCollectMan',
        //   align: 'center'
        // },
        {
          title: '最近一次还款结果',
          key: 'nearlyReimbursementStatus',
          align: 'center'
        },
        {
          title: '逾期类型',
          key: 'assignOverdueTypeCode',
          align: 'center'
        },
        {
          title: '操作',
          key: 'action',
          align: 'center',
          width: 200,
          render: (h, param) => {
            var vm = this
            return h('div', {}, [
              h('Button', {
                props: {
                  type: 'info',
                  size: 'small'
                },
                style: {
                  marginLeft: '10px'
                },
                on: {
                  'click' () {
                    var params = {}
                    params.loanId = param.row.loanId
                    params.insuranceId = param.row.insuranceId
                    params.overdueCaseId = param.row.overdueCaseId
                    vm.$ajax.post(vm.$appContext.marvels_core_debtor + '/debtor/general/collectionManagement/service/initialManagement', params).then(re => {
                      var data = re.data
                      var code = data.code
                      var message = data.message
                      if (code !== 'success') {
                        this.$Message.warning(message)
                        return
                      }
                      vm.modal1 = true
                      vm.curOverdueCaseId = param.row.overdueCaseId
                      vm.collectorCodeList = data.data
                    }).catch(er => {
                      vm.$Message.error(er.message)
                    })
                  }
                }
              }, '转件')
            ])
          }
        }
      ],
      orderData: [
      ],
      productList: [],
      channelList: [],
      fundList: [],
      lastActionCodeList: [],
      lastActionResultList: [],
      riskCategoryList: []
    }
  },
  computed: {
    avatorImage () {
      return localStorage.avatorImgPath
    }
  },

  created () {
    // 初始化当前页面请求对象实例
    this.$ajax = this.$util.ajax()
    this.initPage()
  },

  methods: {
    // 更换催收人提交
    updateBsFund () {
      const vm = this
      var params = {
        pageNum: vm.currentPage,
        pageSize: vm.pageSize,
        custCardNo: vm.custCardNo,
        overdueDays: vm.overdueDays,
        overdueCaseId: vm.curOverdueCaseId,
        collectorCode: vm.collectCondition.collectorCode,
        overdueCurrentTotalDay: vm.overdueCurrentTotalDay
      }
      // console.log(params)
      vm.$ajax.post(vm.$appContext.marvels_core_debtor + 'debtor/general/collectionManagement/service/updataCollectorCode', params).then(re => {
        var data = re.data
        var code = data.code
        var message = data.message
        if (code !== 'success') {
          this.$Message.warning(message)
          return
        }
        vm.curOverdueCaseId = null
        vm.collect()
      }).catch(er => {

      })
    },
    initPage () {
      this.collect()
    },
    pageChange: function (pageNum) {
      var vm = this
      vm.collectCondition.pageNum = pageNum
      vm.collect()
    },
    sizeChange: function (pageLength) {
      var vm = this
      vm.collectCondition.pageSize = pageLength
      vm.collect()
    },
    collect () {
      var vm = this
      this.$ajax.post(vm.$appContext.marvels_core_debtor + 'debtor/general/collectionManagement/service/collectList', vm.collectCondition).then(re => {
        var data = re.data.data
        vm.productList = []
        vm.productList.push({ 'productType': '', 'productTypeName': '请选择' })
        for (var productLength = 0; productLength < data.productList.length; productLength++) {
          vm.productList.push(data.productList[productLength])
        }
        vm.overdueDaysList = []
        vm.overdueDaysList.push({ 'overdueTypeCode': '', 'overdueTypeName': '请选择' })
        for (var riskLength = 0; riskLength < data.voerList.length; riskLength++) {
          vm.overdueDaysList.push(data.voerList[riskLength])
        }
        vm.collectorList = []
        vm.collectorList.push({ 'userCode': '', 'userNamep': '请选择' })
        for (var collectorList = 0; collectorList < data.collectorCodeList.length; collectorList++) {
          vm.collectorList.push(data.collectorCodeList[collectorList])
        }

        vm.orderData = []
        vm.orderData = data.caseList.list
        vm.collectCondition.total = data.caseList.total
      }).catch(er => {

      })
    },
    reset () {
      var vm = this
      vm.collectCondition.custName = ''
      vm.collectCondition.custCardNo = ''
      vm.collectCondition.mobile = ''
      vm.overdueDays = ''
      vm.collectCondition.productCode = ''

      vm.collectCondition.collectorCode = ''
      vm.collectCondition.assignStrDate = ''
      vm.collectCondition.overdueCurrentTotalDay = ''
      vm.collectCondition.assignEndDate = ''
      vm.collectCondition.overdueDays = ''
    }
  }

}
</script>
